<template>
    <!-- 用total控制是显示底部部分 total只有大于0 才会显示 -->
    <div class="footer" v-show="total">
        <label>
            <!--
                <input type="checkbox" :checked="isAll"/>
                    原本是:checked绑定的属性计算属性只是能获取其是否选中,如果要用户点击这个input
                将选中信息传递到MyList中则需要传递父组件App中
                    而 v-model 则是双向绑定, 这里绑定的是计算属性不是props所以是被允许的,
                然后通过计算属性的set方法调用父组件中定义好的方法, 将信息传递到父组件
             -->
            <input type="checkbox" v-model="isAll"/>
        </label>
        <span>
            <span>已完成 {{doneTotal}} </span> / 全部 {{total}}
        </span>
        <button class="btnClear"
                @click="handleClearBtn"
            >
            清除已完成任务
        </button>
    </div>
</template>

<script>
    export default {
        name: "MyFooter",
        // props: ['todos', 'checkAllTodo', 'handleClearAll'],
        props: ['todos'],
        computed: {
            total() {
                return this.todos.length
            },
            doneTotal() {
                return this.todos.reduce((pre, current) => {
                    return pre + (current.done ? 1 : 0)
                }, 0)
            },
            isAll: {
                get() {
                    return this.doneTotal === this.total && this.total > 0
                },
                set(value) {
                    console.log('@', value)
                    // this.checkAllTodo(value)
                    this.$emit('checkAllTodo', value)
                }
            }
        },
        methods: {
            handleClearBtn() {
                // this.handleClearAll()
                this.$emit('handleClearAll')
            }
        }
    }
</script>

<style scoped>
    .btnClear {
        float: right;
        margin-right: 10px;
        background-color: #ff6700;
        color: white;
        text-align: center;
        border: 0px;
        height: 30px;
        width: 120px;
        border-radius: 5px;
    }
    .footer {
        margin: 20px;
    }
</style>